<template>
  <footer>
    <router-link :to="{ name: l.name }" v-for="(l, i) in footList" :key="i">
      {{ l.text }}
    </router-link>
  </footer>
</template>


<script>
export default {
  data() {
    return {
      footList: [
        {
          path: "/home",
          name: "home",
          text: "首页",
        },
        {
          path: "/find",
          name: "find",
          text: "发现",
        },
        {
          path: "/mine",
          name: "mine",
          text: "个人中心",
        },
        {
          path: "/vuex",
          name: "vuex",
          text: "Vuex",
        },
      ],
    };
  },
};
</script>

<style scoped>
.router-link-exact-active,
.router-link-active {
  color: red;
}
a {
  color: black;
}
</style>